import React,{
    Component
} from 'react';

import { observable,action,computed,autorun,decorate} from 'mobx';
import {Menu} from 'antd';


import history from './history';

import  './../less/nav.less'
import store from "./mobxStore";
const SubMenu = Menu.SubMenu;


/******************************************
 *
 * 目前导航只支持二级导航，暂不支持3级导航
 *
 *
 *
 *******************************************/
class Nav extends Component{
    state = {
        selectKey:['index'],//选择的key值
        navData:[//导航数据
            {
                path:'/',
                name:'首页',
                key:'index',
                img:'',
                // isActive:true,
                children:[]
            }, {
                path:'/project',
                key:'/project',
                name:'项目',
                img:'',
                // isActive:false,
                children:[]
            }, {
                path:'/week',
                key:'week',
                name:'周报',
                img:'',
                // isActive:false,
                children:[
                    {
                        path:'/weekCount',
                        key:'weekCount',
                        name:'周报统计',
                        img:'',
                        // isActive:false,
                    },{
                        path:'weekDetail',
                        key:'weekDetail',
                        name:'周报详情',
                        img:'',
                        // isActive:false,
                    }
                ]
            },{
                path:'/test',
                key:'test',
                name:'测试',
                img:'',
                // isActive:false,
                children:[]
            }
        ]
    }
    //导航点击
    navClick = (val) =>{
        //当前页面点击路由不生效
        if(this.state.selectKey[0] === val.key){
            return false
        }
        //设置选中的key
        this.setState({
            selectKey: [val.key]
        })
        //为首页是进行处理
        if(val.key==='index'){
            val.key=''
        }
        //路由的跳转
        history.push(val.key)
    }
    componentDidMount = () =>{

        /******************************当前路由不在首页时，设置单签路由标签选中*****************************************************/
        let nowRoute =history.location.pathname
        if(nowRoute.length>1){//非首页
            nowRoute = nowRoute.substring(1,nowRoute.length);
        }else {//首页
            nowRoute='index'
        }

        this.setState({
            selectKey:[nowRoute]
        })
        console.log('in root.js store is',store)
        /***********************************************************************************/
    }
    render(){
        let navData = this.state.navData;
        return(
            <div className={'nav'}>
                <Menu
                    onClick={this.navClick}
                    selectedKeys ={this.state.selectKey}
                    mode="horizontal"

                >
                    {
                        navData.map((item,index)=>{

                            if(item.children.length>0){
                               return(
                                   <SubMenu title={item.name} key={['sub'+item.key+'_'+index]}>
                                       {
                                           item.children.map((it,i)=>{
                                               return (
                                                   <Menu.Item key={[it.key]}>{it.name}</Menu.Item>
                                                   )

                                           })
                                       }
                                   </SubMenu>
                               )
                            }else {
                                return(
                                    <Menu.Item key={[item.key]}>{item.name}</Menu.Item>
                                )
                            }
                        })

                    }
                </Menu>
            </div>
        )
    }



    get resetFun(){
        console.log('监听到store变化时发生的时候执行')
    }
    chaneValue(){//改变store的值
        console.log('在这里改变store的值')
        let temp = history.location.pathname;
        if(temp.length>1){//非首页
            temp = temp.substring(1,temp.length);
        }else {//首页
            temp='index'
        }
        this.url_ = temp;
        // this.navClick
    }
}

decorate(Nav,{
    url_:observable,
    resetFun: computed,
    changeValue:action
})
export default Nav;